<template>
	<view class="content">
		<view class="detail-title">
			<view class="title-name">
				<view>客户名称</view>
				<view>{{customerNm}}</view>
			</view>
			<view class="title-time">
				<view>注册日期</view>
				<view>{{registerTime}}</view>
			</view>
			
		</view>
		<view class="detail-detail">
			<view class="mingxi"  v-for="(i,index) in info" :key="i.index" :style="{color: i.changeType==='消费'?'#ee0a24':''}">
				<view>{{i.changeType}}</view>
				<view>{{i.changeAmount}}</view>
				<view style="font-size: 22rpx;color:#8b8b8b;">{{i.createTime}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {fetchMoneyDetail,fetchCustomerDetail} from '../../../../api/customer.js'
	
	const cid = ref([])
	const info = ref([])
	const customerNm =  ref('')
	const registerTime = ref('')
	const fetchMD = async()=>{
		
		const res = await fetchMoneyDetail({
			customerId:Number(cid.value)
		})
		const re = await fetchCustomerDetail({
			customerId:Number(cid.value)
		})
		
		info.value = res.data
		console.log(222,re)
		customerNm.value = re.data.customerName
		registerTime.value = re.data.registrationDate
		console.log(121212,info.value)
	}
	
	onLoad((query)=>{
		console.log('余额明细query.id:',query.id)
		cid.value = query.id
	})
	onMounted(async() => {
		    await fetchMD();
	
	})
</script>

<style>
	.content{
		display:flex;
		flex-direction:column;
		width:100%;
		height:100vh;
		align-items:center;
	}
	.detail-title,.detail-detail{
		width:95%;
		height:auto;
		display: flex;
		flex-direction: column;
	}
	.detail-title{
		border-bottom:1rpx solid #c1c1c1;
		justify-content: space-around;
		height:180rpx;
	}
	.title-name,.title-time{
		width:100%;
		display: flex;
		justify-content: space-between;
	}
	.mingxi{
		display: flex;
		width:100%;
		height:100rpx;
		justify-content:space-between;
		align-items: center;
	}
	       
</style>
